<template>
	<view class="share_page" v-show="isShowSharePage" @click="changeShare">
		<view class="page_box" @click.stop>
			<text class="share_tit">选择要分享的平台</text>
			<view class="share_list">
				<button class="share_item" v-for="item in shareList" :key="item.text" :open-type="item.type" @click="shareItem(item.text)">
					<image :src="item.img" mode=""></image>
					<text>{{item.text}}</text> 

				</button>
			</view>
			<text class="cancel_share" @click="changeShare">取消分享</text>
		</view>
		<view v-if="forwardingTips" class="forwarding_tips">
			<text>可选择分享到朋友圈</text>
			<image class="dashed_img" :src="require('../status/image/pyq.png')" mode=""></image>
			<text class="dashed"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'sharePage',
		props: ['isShowSharePage', 'shareList', 'forwardingTips','urls'],
		data() {
			return {
				urls: ''
			}
		}, 
		methods: {
			changeShare() {
				uni.$emit('changeShare', false)
			},
			shareItem(text) {
				uni.$emit('changeForwardingTips', false)
				if (text == '拷贝') {
					uni.setClipboardData({
						data: this.urls,
						success: res => {
							uni.showToast({
								title: '复制成功',
								icon: 'none',
								duration: 2000 //时间
							});
						}
					});
				} else if (text == '微信朋友圈') {
					uni.$emit('changeForwardingTips',true)
				}
			}
		},
		watch:{
			urls(newVal,oldVal){ 
				this.urls = newVal
			}
		}
	}
</script>

<style lang="less">
	.share_page {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .2);

		.page_box {
			position: absolute;
			bottom: 0;
			width: 100vw;
			background-color: #fff;

			.share_tit {
				display: block;
				font-size: 32rpx;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
			}

			.share_list {
				display: flex;
				height: 200rpx;

				.share_item {
					margin: 0;
					border-radius: 0;
					background-color: #fff;
					text-align: center;
					flex: 1;

					image {
						margin: 0 auto;
						display: block;
						width: 100rpx;
						height: 100rpx;
					}

					text {}
				}
			}

			.cancel_share {
				display: block;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				font-size: 32rpx;
			}
		}

		.forwarding_tips {
			padding: 0 10rpx;
			display: block;
			position: absolute;
			width: 380rpx;
			right: 20rpx;
			top: 110rpx;
			font-size: 32rpx;
			color: #fff;
			border: 1rpx dashed #fff;
			border-radius: 10rpx;
			.dashed_img {
				margin: 0 10rpx;
				width: 40rpx; 
				height: 40rpx;
				vertical-align: middle;
			}

			.dashed {
				position: absolute;
				top: -44px;
				left: 104px;
				width: 20px;
				height: 44px;
				border-radius: 30px;
				border-right: 2px dashed #fff;

				&::before {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					left: 14rpx;
					top: -10rpx;
					border-right: 10px solid transparent;
					border-left: 10px solid transparent;
					border-bottom: 10px solid #fff;
				}
			}
		}
	}
</style>
